<!DOCTYPE>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>带阴影弹窗</title>

		<link rel="stylesheet" href="css/bootstrap.min.css" />

		<script src="libs/SuperMap.Include.js"></script>

		<script type="text/javascript">
			var map, baseLayer, marker, markers, framedCloud;

			function init() {
				var resolutions = [9783.93962049996, 4891.96981024998, 2445.98490512499, 1222.992452562495, 611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685];
				var matrixIds = new Array(13);
				for (var i = 0; i < 13; i++) {
					matrixIds[i] = {
						identifier: i
					};
				};
				//初始化地图拖拽控件类
				dragPan = new SuperMap.Control.DragPan();
				//当该属性为true，拖拽地图时，鼠标移动到地图可视区域外依然有效。默认为false
				dragPan.documentDrag = true;
				//设置是否使用拖拽动画。默认为false，不使用动画
				dragPan.enableKinetic = true;
				//执行动画的间隔，默认为10，单位是毫秒
				dragPan.kineticInterval = 20;
				map = new SuperMap.Map("map", {
					controls: [
						dragPan,
						new SuperMap.Control.Zoom(), new SuperMap.Control.Navigation()
					],
					maxExtent: new SuperMap.Bounds(8176078.237500001, 379653.95419999957, 15039542.061499998, 7087813.645199999)
				});
				//底图图层
				baseLayer = new SuperMap.Layer.WMTS({
					name: "Maps_StreetMap",
					url: "http://172.24.186.81:6080/arcgis/rest/services/Maps/StreetMap/MapServer/wmts",
					layer: "Maps_StreetMap",
					style: "default",
					matrixIds: matrixIds,
					matrixSet: "default028mm",
					format: "image/jpg",
					resolutions: resolutions, //分辨率数组
					tileOrigin: new SuperMap.LonLat(-20037508.342787, 20037508.342787), //瓦片矩阵左上角
					requestEncoding: "KVP"
				});
				map.addLayers([baseLayer]);
				map.setCenter(new SuperMap.LonLat(11997336, 3544032), "4");
				dragPan.activate();
				//初始化标记图层类
				markers = new SuperMap.Layer.Markers("Markers");
				size = new SuperMap.Size(21, 25);
				offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
				icon = new SuperMap.Icon('images/markerbig_select.png', size, offset);
				//初始化标记覆盖物类
				marker = new SuperMap.Marker(new SuperMap.LonLat(11997336, 3544032), null);
				//添加覆盖物到标记图层
				markers.addMarker(marker);
				//注册 click 事件,触发 mouseClickHandler()方法
				marker.events.on({
					"click": mouseClickHandler,
					"touchstart": mouseClickHandler //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
				});
				map.addLayers([markers]);
			}
			var infowin = null;
			//定义mouseClickHandler函数，触发click事件会调用此函数
			function mouseClickHandler(event) {
				closeInfoWin();
				var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
				contentHTML += "伦敦贝克街221号B";
				contentHTML += "</div>";
				//初始化FramedCloud类
				framedCloud = new SuperMap.Popup.FramedCloud(
					"chicken",
					marker.getLonLat(),
					null,
					contentHTML,
					icon,
					true,
					null,
					true
				);
				infowin = framedCloud;
				map.addPopup(framedCloud);
			}

			function closeInfoWin() {
				if (infowin) {
					try {
						infowin.hide();
						infowin.destroy();
					} catch (e) {}
				}
			}
		</script>
	</head>

	<body onload="init()">
		<div id="map"></div>
	</body>

</html>